@var userOffice = office.getUserOfficeList(); //用户持有的机构
@var userDataScopeList = office.getUserDataScope(); //用户数据范围
<div class="tabbable">
	<ul class="nav nav-tabs" id="myTab">
		<li class="active"><a data-toggle="tab" href="#home"> <i
				class="green ace-icon fa fa-graduation-cap bigger-120"></i> 角色列表
		</a></li>

		<li class=""><a data-toggle="tab" href="#profile">
		<i class="green ace-icon fa fa-plus bigger-120"></i> 角色添加
		</a></li>
	</ul>

	<div class="tab-content">
		<div id="home" class="tab-pane active clearfix">
			<#search>
				<form action="${ctxPath}/role/list" method="post" id="search-form" 
				target="list-page" class="center clearfix">
					<div class="row padding-tb-10">
						<div class="col-sm-6">
							<label class="inline">数据范围：</label>
							<#select id="userDataScope" name="dataScope" width="80%">
								<option value="">全部</option>
								@for(item in userDataScopeList){
									<option value="${item.value!}">${item.label!}</option>
								@}
							</#select>
						</div>
						<div class="col-sm-6">
							<label class="inline">归属机构：</label>
							<#pullDownTree order="one" treeData="${userOffice}" name="officeId" 
								class="width-80" />
						</div>
					</div>
					<div class="row padding-tb-10">
						<div class="col-sm-6">
							<label>角色名称：</label>
							<input type="text" class="width-80" name="name"/>
						</div>
						<div class="col-sm-6">
							<label>角色描述：</label>
							<input type="text" class="width-80" name="remarks"/>
						</div>
					</div>
					<div class="padding-trb-10 col-sm-12">
						<span class="btn  btn-primary btn-sm col-sm-6" onclick="$curmenu.trigger('click');">全 部 角 色</span>
						<span class="btn btn-info btn-sm col-sm-6" id="search-btn">条 件 查 询</span>
					</div>
				</form>
			</#search>
			<div class="space-6"></div>
			<div id="list-page"></div>
		</div>

		<div id="profile" class="tab-pane">
			<form action="${ctxPath!}/role/save" method="post" id="role-save-form" class="padding-10">
				<table class="EditTable">
					<tbody>
						<tr class="FormData">
							<td class="CaptionTD">归属机构：</td>
							<td class="DataTD">
							<#treeselect url="office/tree" modelId="officeId" 
								class="width-50" isCheck="请选择归属机构" />
							</td>
						</tr>
						<tr class="FormData">
							<td class="CaptionTD">角色名称：</td>
							<td class="DataTD">
							<input type="text" class="" name="name" datatype="*"  nullmsg="请输入角色名称！"/>
							</td>
						</tr>
						<tr class="FormData">
							<td class="CaptionTD">数据范围：</td>
							<td class="DataTD width-100">
								
								<#select id="saveUserDataScope" name="dataScope" width="50%">
									@for(item in userDataScopeList){
										<option value="${item.value!}">${item.label!}</option>
									@}
								</#select>
								<script type="text/javascript">
									$(function(){
										$("#saveUserDataScope").change(function(){
											if($(this).val() == 9){
												$("#treeSelectOffice").show();
											}else{
												$("#treeSelectOffice").hide();
											}
										})
										$("#saveUserDataScope option[value='9']").attr("selected",true);
										$("#saveUserDataScope").trigger("chosen:updated");
									});
								</script>
								<span class="red width-50"> 特殊情况下,设置为"按明细设置",可进行跨机构授权</span>
							</td>
						</tr>
						<tr class="FormData">
							<td class="CaptionTD" style="vertical-align: top;">角色授权：</td>
							<td class="DataTD">
								<#treeselect url="menu/tree" checked="true" isLayer="false" rootNodeName="权限列表"
									class="width-50" treeSelectId="treeSelectRes" chkboxType="2">
									<div id="treeSelectRes" style="width: 40%;display: inline-block;vertical-align: top;float: left"></div>
								</#treeselect>
								<#treeselect url="office/tree" checked="true" isLayer="false" rootNodeName="机构列表"
									class="width-50" treeSelectId="treeSelectOffice" chkboxType="1">
									<div id="treeSelectOffice" style="width: 50%;display: inline-block;vertical-align: top;float: left"></div>
								</#treeselect>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="margin-t15">
					<span class="btn btn-info btn-block bigger-120" id="role-save-btn">保 存</span>
				</div>
			</form>
		</div>
	</div>
</div>

<#save isHide="yes" subBtnId="role-save-btn" formId="role-save-form" config="true" validId="roleForm">
	var permission = getCheckbox(treeSelectRes);
	var office = getCheckbox(treeSelectOffice);
	var data = $("#role-save-form").serialize()+"&resourceIds="+permission.toString()+
				"&officeIds="+office.toString();
	roleForm.config({
		 ajaxpost:{
			 data:data
		 }
	});
</#save>
<script type="text/javascript">
	$("#search-form").getPageList({'submitBtnId':'search-btn'})
</script>
